<template>
  <div class="login-register-container">
    <Particles id="tsparticles" class="login-particles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded"
      :options="options" />
    <el-card class="box-card">
      <div class="logo-container">
        <span style="font-size: 20px; color: rgb(178,206,252);">管理员端</span>
      </div>
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="登录" name="login">
          <el-form :model="loginForm" ref="loginFormRef" :rules="rules1" :hide-required-asterisk="true">
            <el-form-item label="编码" prop="loginCode" style="margin-top: 20px" >
              <el-input v-model="loginForm.loginCode" placeholder="请输入登录编码"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="passWord">
              <el-input type="password" v-model="loginForm.passWord" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitLogin" style="width: 100%">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { loadFull } from 'tsparticles'
import type { Engine } from 'tsparticles-engine'
import axios from '@/axiosUtil.js';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const activeTab = ref('login');
const loginForm = reactive({
  loginCode: '',
  passWord: ''
});
const rules1 = {
  loginCode: [
    { required: true, message: '请输入登录编码', trigger: 'blur' },
    { pattern: /^[0-9A-Za-z]{10}$/, message: '编码格式不正确', trigger: 'blur' }
  ],
  passWord: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
  ]
};

const router = useRouter();

function handleTabClick(tab) {
  console.log('Switching to:', tab.props.name);
}

function submitLogin() {
  const param = {
    admin_code: loginForm.loginCode,
    password: loginForm.passWord
  };
  const loginUrl = 'http://localhost:7000/service-nepm/Administrator_login';
  if (loginForm.loginCode === '' || loginForm.passWord === '') {
    ElMessage({
      message: '请输入登录编码和密码',
      type: 'error',
    });
    return;
  }
  axios.post(loginUrl, param)
    .then(response => {
        console.log(response.data);
      if (response.data.status) {
        ElMessage({
          message: '您作为系统管理员，已成功登录！',
          type: 'success',
        });
        sessionStorage.setItem("token", response.data.token);
        console.log(response.data.token);
        sessionStorage.setItem("isLogin", "ok");
        router.push({ name: 'home', query: { user: response.data} });
      } else {
        ElMessage({
          message: response.data.msg,
          type: 'error',
        });
      }
    })
    .catch(error => {
      handleErrors(error);
    });
}

function handleErrors(error) {
  if (error.response) {
    ElMessage({
      message: '服务器错误: ' + error.response.data.msg,
      type: 'error',
    });
  } else if (error.request) {
    ElMessage({
      message: '服务器无响应',
      type: 'error',
    });
  } else {
    ElMessage({
      message: '错误: ' + error.message,
      type: 'error',
    });
  }
}
 
const particlesInit = async (engine: Engine) => {
  await loadFull(engine)
}
 
const particlesLoaded = async (container: any) => {
  console.log('Particles container loaded', container)
}
 
//可以在https://codepen.io/collection/DPOage?这个网站上面选择喜欢的 把这个配置换了就可以
const options = {    
  fps_limit: 60,
  interactivity: {
    detect_on: "canvas",
    events: {
      onclick: { enable: true, mode: "push" },
      onhover: {
        enable: true,
        mode: "attract",
        parallax: { enable: false, force: 60, smooth: 10 }
      },
      resize: true
    },
    modes: {
      push: { quantity: 4 },
      attract: { distance: 200, duration: 0.4, factor: 5 }
    }
  },
  particles: {
    color: { value: "#ffffff" },
    line_linked: {
      color: "#ffffff",
      distance: 150,
      enable: true,
      opacity: 0.4,
      width: 1
    },
    move: {
      attract: { enable: false, rotateX: 600, rotateY: 1200 },
      bounce: false,
      direction: "none",
      enable: true,
      out_mode: "out",
      random: false,
      speed: 2,
      straight: false
    },
    number: { density: { enable: true, value_area: 800 }, value: 80 },
    opacity: {
      anim: { enable: false, opacity_min: 0.1, speed: 1, sync: false },
      random: false,
      value: 0.5
    },
    shape: {
      character: {
        fill: false,
        font: "Verdana",
        style: "",
        value: "*",
        weight: "400"
      },
      image: {
        height: 100,
        replace_color: true,
        src: "images/github.svg",
        width: 100
      },
      polygon: { nb_sides: 5 },
      stroke: { color: "#000000", width: 0 },
      type: "circle"
    },
    size: {
      anim: { enable: false, size_min: 0.1, speed: 40, sync: false },
      random: true,
      value: 5
    }
  },
  polygon: {
    draw: { enable: false, lineColor: "#ffffff", lineWidth: 0.5 },
    move: { radius: 10 },
    scale: 1,
    type: "none",
    url: ""
  },
  retina_detect: true
}
</script>

<style scoped>
.login-register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #f0f4f7, #a1c4fd);
}

.box-card {
  width: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color: #f9f9f9;
}

.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 0px;
  margin-top: 0px;
}


</style>
